/**
 * @author Binu Festin
 * @Plugin HTMLog
 * A jQuery Plugin to log user activity on any HTML data control like INPUT, TEXTAREA, SELECT.
 * This plugin tracks all the changes in the data made by the user in a page and creates a log
 * at the bottom/top of the browser based on the user's argument passed while calling this
 * function. The other arguments allowed are the elements that are to be logged (a css selector style
 * argument) and the message that is to be used to display in the log being generated.
 */
(function ($) {
    $.fn.htmlog = function (options) {
        var defaults = {
            selector : 'input, textarea, select', logText : '#name changed from #oldvalue to #newvalue'
        };
        var elements = ['button', 'div'];
        options = $.extend(defaults, options);
        var htmlog = createHTMLogElement(elements[1], '', '');
        $('body').append(htmlog);
        htmlog = $(htmlog);
        htmlog.slideBox();
        var htmlogs = $('#htmlogs-container');
        $(options.selector).each(function (i, ele) {
            var e = $(ele);
            e.focus(function () {
                if (typeof ele.oldval == 'undefined')
                    ele.oldval = ele.value;
            });
            e.keyup(function () {
                if (this.oldval == this.value) {
                    $(this.log).remove();
                    return;
                }
                var name = $('label[for=' + this.name + ']').html();
                var message = options.logText.replace('#name', name);
                message = message.replace('#oldvalue', this.oldval);
                message = message.replace('#newvalue', this.value);
                if (typeof this.log == 'undefined')
                    this.log = createHTMLogElement(elements[1], 'htmlog', message);
                else 
                    this.log.innerHTML = message;
                var revert = createHTMLogElement(elements[0], '', 'revert');
                revert.control = this;
                this.log.appendChild(revert);
                htmlogs.append(this.log);
                $(revert).click(function () {
                    this.control.value = this.control.oldval;
                    $(this.parentNode).remove();
                });
            });
        });
    };
})(jQuery);

function createHTMLogElement(tag, className, content) {
    var ele = document.createElement(tag);
    ele.className = className;
    ele.innerHTML = content;
    return ele;
}

/**
 * Slide Box Scripts (Customized)
 * by Samuel Garneau <samgarneau@gmail.com>
 * http://samuelgarneau.com
 */
(function ($) {
    $.fn.slideBox = function (params) {

        var content = $(this).html();
        var defaults = {
            width : "100%", height : "200px", position : "bottom"// Possible values : "top", "bottom"
        }

        // extending the fuction
        if (params)
            $.extend(defaults, params);

        var divPanel = $("<div class='slide-panel'>");
        var divContent = $("<div class='content' id='htmlogs-container'>");

        $(divContent).html(content);
        $(divPanel).addClass(defaults.position);
        $(divPanel).css("width", defaults.width);

        // centering the slide panel
        $(divPanel).css("left", (100 - parseInt(defaults.width)) / 2 + "%");

        // if position is top we're adding 
        if (defaults.position == "top")
            $(divPanel).append($(divContent));

        // adding buttons
        $(divPanel).append("<div class='slide-button htmlog'>Logs<\/div>");
        $(divPanel).append("<div style='display: none' id='close-button' class='slide-button htmlog'>Hide Logs<\/div>");

        if (defaults.position == "bottom")
            $(divPanel).append($(divContent));

        $(this).replaceWith($(divPanel));

        // Buttons action
        $(".slide-button").click(function () {
            if ($(this).attr("id") == "close-button")
                $(divContent).animate( {
                    height : "0px"
                },
1000);
            else 
                $(divContent).animate( {
                    height : defaults.height
                },
1000);

            $(".slide-button").toggle();
        });
    };

})(jQuery);